<template>
  <div id="box">
  
    <headerVue :xxx="todos"></headerVue>
    <listVue :xxx="todos"></listVue>
    <footerVue :xxx="todos"></footerVue>
  </div>
</template>

<script>
import footerVue from './components/footer.vue';
import headerVue from './components/header.vue';
import listVue from './components/list.vue';

export default {
  props: {

  },
  components: {
    footerVue,
    headerVue,
    listVue,

  },
  data() {
    return {
      todos: [
        { id: 1, name: '学习', isdone: true },
        { id: 2, name: '吃饭', isdone: true },
        { id: 3, name: '买键盘', isdone: false }
      ]
    }
  },
  methods: {

  }
}
</script>

<style > 
  #box{
    /* height: 200px; */
    width: 250px;
    border: 1px solid red;
    margin:  0 auto;
  }
</style>